{#templates/base.html#}

{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title></title>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/jquery.cookie.js' %}"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'fileinput/css/fileinput.css' %}">
    <script src="{% static 'fileinput/js/fileinput.js' %}"></script>
    <script src="{% static 'fileinput/js/locales/zh.js' %}"></script>

</head>
<body>
<div class="form-group">
    <div class="col-sm-12">
        <form>
            {% csrf_token %}
            <input id="upload-file" type="file" class="file-loading" name="attachment" multiple />
            <p class="help-block">支持jpg、jpeg、png、gif,txt,"docx","zip","xlsx"格式，大小没限制</p>
        </form>
    </div>
</div>

<script>
//
//在项目里一同引入bootstrap、fontawesome库会引发与xadmin原生冲突。下步应直接引用xadmin的基础库。
//因此非单独应用时，不需要在引入bootstrap、fontawesome库
var aryFiles = Array();
            //此处两个错误：1.如果浏览器有默认js拦截的话，会报错；2.如果适用token的话，就必须引入jquery.cookie.js插件，否则也报错。
            $('#upload-file').fileinput({
                language: 'zh',     // 设置语言，需要引入locales/zh.js文件
                uploadUrl: 'http://192.168.28.111:5000/project/att_upload',     // 上传路径
                maxFileSize: 0,     // 上传文件大小限制，触发 msgSizeTooLarge 提示
                // {name}：将被上传的文件名替换，{size}：将被上传的文件大小替换，{maxSize}：将被maxFileSize参数替换。
                msgSizeTooLarge: '"{name}" ({size} KB) 超过允许的最大上传大小 {maxSize} KB。请重新上传!',
                showPreview: true,  // 展示预览
                showUpload: true,   // 是否显示上传按钮
                showCaption: true,  // 是否显示文字描述
                showClose: false,   // 隐藏右上角×
                uploadAsync: true, // 是否异步上传
                initialPreviewShowDelete: true, // 预览中的删除按钮
                autoReplace: true,  // 达到最大上传数时，自动替换之前的附件
                uploadExtraData: function () {  // uploadExtraData携带附加参数，上传时携带csrftoken
                    //此处可分为三种情况：1.可去掉，直接return{}；2.
                    return {csrfmiddlewaretoken: $.cookie('csrftoken')}
                    ////, doc_uuid: $('[name=doc_uuid]').val()
                },
                initialPreview :[],　　// 默认预览设置，回显时会用到
                initialPreviewConfig: [],　　// 默认预览的详细配置，回显时会用到
            }).on("fileuploaded", function (e,data,previewId,index) {
                // 上传成功后触发的事件
            }).on("fileclear", function (e) {
                // 移除按钮触发的事件，用该事件批量删除

                $.ajax({
                    url: '/del_all_att/',
                    method: 'post',
                    dataType: 'json',
                    data: {'aryFiles': JSON.stringify(aryFiles)},
                    success: function (data) {
　　　　　　　　　　　　　　
                    }
                })
            }).on("filepredelete", function (e, key, jqXHR, data) {
                // 预览中删除按钮，删除上传的文件触发的事件
            }).on("fileloaded", function (e, file, previewId) {
                // aryFile.length = 0;
                // 加载预览后触发的事件，将所有文件名添加到全局变量 aryFiles 数组中
                aryFiles.push(file.name);
            })
</script>